<template>
  <div class="app-container ">
    {{ name }}
    <div id="main" style="width:800px;height:500px">
    </div>
  </div>
</template>

<script setup>
import * as echarts from 'echarts';
import { onMounted, ref } from 'vue';
function getOptions(type, xList, yList, sList) {
  var options = {
    xAxis: {
      type: 'category',
      data: xList
    },
    yAxis: {
      type: 'value',
      data: yList
    },
    series: [
      {
        data: sList,
        type: type
      }
    ]
  };
  return options
}
onMounted(() => {
  var myChart = echarts.init(document.getElementById('main'));

  var type = 'bar';
  var xList = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
  var yList = [];
  var sList = [150, 230, 224, 218, 135, 147, 260];
  myChart && myChart.setOption(getOptions(type, xList, yList, sList));

})
</script>